<template>
    <div>
      <div :class="isTrue?'outLine1':'outLine2'">
        <div class="name">{{name}}</div>
      </div>
      <div :class="isTrue?'triangle1':'triangle2'">

      </div>
    </div>
</template>

<script>
    export default {
      name: "dmark",
      props: {
        name:String,
        isTrue:Boolean
      },
    }
</script>

<style scoped>
  .outLine1{
    width:60px;
    margin: 10px;
    margin-top: 0px;
    margin-bottom: 0;
    height: 110px;
    background-color: #EA5149;
    border-radius:5px 5px 0 0;
    color: #FFF;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .outLine2{
    width:60px;
    margin: 10px;
    margin-top: 0px;
    margin-bottom: 0;
    height: 110px;
    background-color: rgba(0,0,0,0.4);
    border-radius:5px 5px 0 0;
    color: #777777;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .name{
    writing-mode:vertical-lr;
    text-align:center;
    width:25px;
  }
  .triangle1{
    width: 0px;
    height: 0px;
    box-sizing: border-box;
    margin: 10px;
    margin-top: 0;
    border-left:30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #EA5149;
  }
  .triangle2{
    width: 0px;
    height: 0px;
    box-sizing: border-box;
    margin: 10px;
    margin-top: 0;
    border-left:30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid rgba(0,0,0,0.4);
  }
</style>
